<template>
  <a-modal v-model:visible="visible" title="文件查看" width="80%" :footer="null">
    <a-row>
      <a-col :span="6">
        <a-list item-layout="horizontal">
          <a-list-item v-for="(file, index) in files" :key="index" @click="viewFile(file)">
            <a-list-item-meta>
              <a-avatar slot="avatar" size="large" style="background-color: #1890ff">{{ file.name.slice(0, 2) }}</a-avatar>
              <a slot="title">{{ file.name }}</a>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-col>
      <a-col :span="18">
        
      </a-col>
    </a-row>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue';


const visible = ref(false);
const files = ref([
  { name: '文件1.pdf', url: 'https://example.com/file1.pdf' },
  { name: '文件2.docx', url: 'https://example.com/file2.docx' },
]);
const selectedFile = ref(null);

function viewFile(file) {
  selectedFile.value = file;
}
</script>